<template>
  <view class="bank-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      :leftText="title"
      left-icon="arrow-left"
      left-icon-color="#303133"
      bg-color="#ffffff"
      fixed
      placeholder
      @left-click="back"
    />

    <!-- 银行卡列表区域 -->
    <view class="bank-list">
      <view v-for="(card, index) in bankCards" :key="index" class="bank-card" :style="{backgroundColor: getBgColor(card.name)}">
        <view class="card-header">
          <view class="bank-info">
            <text class="bank-name" style="margin-bottom: 10px;">{{ card.name }}</text>
            <text class="card-type">{{ card.outlets }}</text>
          </view>
          <view class="card-actions">
              <up-tooltip
                    triggerMode="click"
                    direction="bottom"
                    bgColor="#e53935"
                    color="#ffffff"
                    :offset-x="0"
                    :offset-y="-60"
                >
                    <template #trigger>
                        <up-icon name="more-dot-fill" :stop="false"  class="dots-icon"></up-icon>
                    </template>
                    <template #content>
                        <view style="padding: 8rpx 16rpx; font-size: 28rpx;" @click.stop="deleteCard(index)">删除</view>
                    </template>
                </up-tooltip>
          </view>
        </view>
        <view class="card-number">
          <text>{{ getMaskedNumber(card.number) }}</text>
        </view>
      </view>
    </view>

    <!-- 添加银行卡按钮 -->
    <view class="add-button-container">
      <u-button type="primary" style="width: 80%;" @click="addBankCard">+ 添加银行卡</u-button>
    </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app"
import { ref, reactive, onMounted } from "vue";
import { navigate as publicNavigate } from "@/utils/public.js";
import { getListByVo, del } from "../../api/bankCard.js";
const back = () => {
  publicNavigate("back");
};
// 设置页面标题
const title = ref("银行卡");

const bgColorMap = {
  "工商银行": "#C95F61",
  "建设银行": "#006400",
  "中国银行": "#18579A",
  "交通银行": "#FFD700",
  "农业银行": "#D2691E",
  "招商银行": "#FFA500",
  "兴业银行": "#C95F61",
  "中国邮政储蓄银行": "#FFC0CB",
  "中国民生银行": "#FFD700",
  "中国光大银行": "#C95F61",
  "中国工商银行": "#8B2323",
  "中国建设银行": "#006400",
  "中国交通银行": "#18579A",
  "中国招商银行": "#FFA500",
  "中国兴业银行": "#C95F61",
}
const getBgColor = (bankName) => {
  return bgColorMap[bankName] || "#C95F61";
}
const getMaskedNumber = (cardNumber) => {
  if(cardNumber){
    return "**** **** **** " + cardNumber.slice(-4);
  }else{
    return "**** **** ****"
  }
}
// 银行卡数据
const bankCards = reactive([
  // {
  //   id: 1,
  //   bankName: "工商银行",
  //   cardType: "储蓄卡 | 可查询余额",
  //   cardNumber: "1234567890123456789",
  //   maskedNumber: "**** **** **** 7660",
  //   bgColor: "#8B2323" // 进一步调暗的红色
  // },
  // {
  //   id: 2,
  //   bankName: "中国银行",
  //   cardType: "储蓄卡 | 可查询余额",
  //   cardNumber: "9876543210987654321",
  //   maskedNumber: "**** **** **** 0474",
  //   bgColor: "#8B2323" // 进一步调暗的红色
  // },
  // {
  //   id: 3,
  //   bankName: "交通银行",
  //   cardType: "储蓄卡 | 可查询余额",
  //   cardNumber: "5678901234567890123",
  //   maskedNumber: "**** **** **** 7843",
  //   bgColor: "#18579A" // 进一步调暗的蓝色
  // }
]);

// 显示弹窗的索引，-1表示不显示
const showPopover = ref(-1);

// 删除银行卡
const deleteCard = (index) => {
  showPopover.value = -1;
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这张银行卡吗？',
    success: (res) => {
      if (res.confirm) {
        // console.log(bankCards[index].id)
        // return;
        del(bankCards[index].id).then((res) => {
          if (res.code === 200) {
            bankCards.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }else{
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        }).catch(() => {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          });
        })
        getList();
      }
    }
  });
};

// 添加银行卡
const addBankCard = () => {
    publicNavigate("/pages/my/addBank");
//   uni.showToast({
//     title: '添加银行卡功能暂未开放',
//     icon: 'none'
//   });
};

const getList = () => {
  const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
  getListByVo({employeeId:userInfo.info.id}).then((res) => {
    if (res.code === 200) {
      bankCards.splice(0, bankCards.length);
      bankCards.push(...res.data.list);
    }else{
      console.log(res.msg)
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      });
    }
  }).catch(() => {
    console.log(res.msg)
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    });
  })
};
onMounted(() => {
  getList();
})

// 页面显示时刷新数据
onShow(() => {
  getList();
})

</script>

<style lang="scss" scoped>
.bank-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

// 银行卡列表样式
.bank-list {
  padding: 30rpx;
}

// 银行卡样式
.bank-card {
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx; // 增加间距
}

.bank-info {
  flex: 1;
}

.bank-name {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx; // 增加行间距
}

.card-type {
  font-size: 24rpx;
  opacity: 0.8;
  display: block;
  margin-bottom: 5rpx; // 增加行间距
}

.card-actions {
  padding: 5rpx;
  z-index: 10;
}

.dots-icon {
  width: 44rpx;
  height: 44rpx;
  color: #fff;
  line-height: 44rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  padding: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-number {
  font-size: 36rpx;
  letter-spacing: 6rpx;
  margin-top: 20rpx; // 增加间距
  display: block;
}

/* 弹出层样式 */
.pop-content {
  width: 140rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.delete-item {
  color: #e53935;
  font-size: 28rpx;
  padding: 20rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.delete-item:active {
  background-color: #f5f5f5;
}

// 添加银行卡按钮样式
.add-button-container {
  padding: 30rpx;
  text-align: center;
}
</style>